﻿<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>event事件详解</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
     
        
    </style>
</head>
<body>
<input type="text" name="" value="请输入内容" class="input-btn" id="j_text" />
<input type="button" name="" value="全选" class="input-btn" id="j_btn" />
<script type="text/javascript">
/*
 * 焦点：
 * 1、点击
 * 2、tab
 * 3、js
 * 不是所有元素才可以接收焦点，能够响应用户操作的元素才有焦点,例如 input button a 。
 * 
 * 焦点事件：
 * onfocus：当元素获取到焦点时触发
 * onblur:当元素失去焦点的时候触发
 * obj.focus() 给指定元素设置焦点
 * obj.blur() 取消指定元素的焦点
 * obj.select() 选择指定元素里面的文本内容 ,但是它能选中的内容只能是用户能够输入的内容，能操作的是可交互性的文本 内容。
 * 
 * Event对象：
 * 事件对象，它是事件的核心，当一个事件发生的 时候 ，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存的到一个指定的地方——event对象，供我们在需要的时候调用。例如 飞机的黑匣子。
 * 事件对象必须在一个事件调用的函数里面使用才有内容。
 * 事件函数：时间调用的函数，一个函数是不是事件函数，不在定义的决定，而是取决于这个调用的时候。
 * 
 * 兼容：
 * ie/chrome ： event是一个内痔全局对象，初始值是null。
 * ff：event会出现报错，出现underfind，事件对象是通过事件函数的第一个参数传入。
 * 标准下：事件对象是通过事件函数的第一个参数传入。
 * 
 * 重点：如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象。
 * 
 * Event对象参数 clientX ：鼠标点击的位置到可视区的X坐标。
 * onmousemove: 当鼠标在一个元素上面移动的触发，触发频率不是像素；而是间隔时间，在一个指定的时间内，如果鼠标的位置和上一个的位置对比发生变化，那么就会触发一次。
 * */
    window.onload=function(){
        var oText = document.getElementById("j_text");
        var oBtn = document.getElementById("j_btn");
		    oText.onfocus = function(){
		    	if(this.value == "请输入内容"){
		       		this.value ="";
		        }
		    };
		    oText.onblur = function(){
		     	if(this.value == ""){
		       		this.value ="请输入内容";
		        }
		    }
		    //oText.focus();
		    
		    oBtn.onfocus = function(){
		    	oText.select();
		    };
		    //兼容浏览器的写法
		    function fn1(ev){
		    	var ev = ev || event;
		    	alert(ev);
		    	  for(var attr in ev){
		    	  	console.log(attr+"="+ev[attr]);
		    	  }
		    }
		    //fn1(); //在这里，不是事件调用的函数，会出现underfind event没有内容
		    document.onclick = fn1; //是事件调用，所以event有内容
		    
		  
		}
</script>
</body>

</html>
